<template>
    <Layout title="分类">
        <van-sidebar v-model="activeKey" @change="onChange">
            <van-sidebar-item
                v-for="item in catList"
                :key="item.id"
                :title="item.name"
            />
        </van-sidebar>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
            >
                <van-card
                    v-for="(item, index) in goodList"
                    :key="index"
                    :title="item.name"
                >
                    <template #thumb>
                        <van-image :src="item.pics[0]"></van-image>
                        <img
                            v-if="item.is_promote"
                            src="@/assets/images/home-promotion.png"
                            class="promotion"
                            alt=""
                        />
                    </template>
                    <template #price>
                        <p>
                            ￥{{
                                item.is_promote
                                    ? item.promote_price
                                    : item.price
                            }}
                            <span>￥{{ item.price }}</span>
                        </p>
                    </template>
                    <template #bottom>
                        <van-button
                            type="warning"
                            icon="plus"
                            plain
                            hairline
                            size="mini"
                            >加入购物车</van-button
                        >
                    </template>
                </van-card>
            </van-list>
        </van-pull-refresh>
    </Layout>
</template>

<script src="./js/index.js"></script>
<style lang="less" scoped src="./less/index.less"></style>